import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { map } from 'lodash';

import Tab from '../components/tabs.jsx';
import EditorContainer from '../components/editor-container.jsx';

import { switchActiveFile, closeFile, readFile, saveFile, markDirty } from '../actions/files-actions.js';
import { updateCursor, updateSelection } from '../actions/editor-status-actions.js';
import { showNotification } from '../actions/notifications-actions.js';

/**
 * 右侧主视图容器, 包含标签页与状态栏
 * @class {MainView}
 * @extends {React.Component}
 */
@connect(state => ({
    files: state.files
}))
export default class MainView extends Component {

    render() {
        const { files, dispatch }  = this.props;

        return (
            <div className="main-view">
                <Tab items={files.opened}
                    selectedIndex={files.current}
                    closable={true}
                    {...bindActionCreators({
                        onSelect: switchActiveFile,
                        onClose: closeFile
                    }, dispatch)} />
                <EditorContainer items={files.opened}
                    selectedIndex={files.current}
                    childProps={bindActionCreators({
                        readFile,
                        saveFile,
                        updateCursor,
                        updateSelection,
                        markDirty,
                        showNotification
                    }, dispatch)} />
            </div>
        );
    }
}